<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/uploadifive/jquery.uploadifive.min.js"></script>
<!--Add Dishes-->
<style>
.uploadifive-button {
	height: 30px;
	line-height: 30px;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 100px;
	background-color: gold
}

.uploadifive-queue-item {
	margin: 10px 0;
}

#queue {
	border: 1px solid #E5E5E5;
	height: 177px;
	overflow: auto;
	margin-bottom: 10px;
	padding: 0 3px 3px;
	width: 300px;
}

#fPicPreview img{
	width:200px;
	height:200px;
}
</style>
<div class="panel-body">
	<h1 class="center-font">添加菜品</h1>
	<form role="form"
		action="${pageContext.request.contextPath }/homes/addDish"
		method="post" onsubmit="return checkForm()" class="login-form"
		enctype="multipart/form-data">
		<div class="form-group">
			<label>Food Name</label>
			<div class="input-group">
				<span class="input-group-addon"><span
					class="glyphicon glyphicon-info-sign"></span> </span> <input type="text"
					class="form-control" id="fname" name="fName"
					placeholder="Food Name...">
			</div>
			<span class="red-span" id="fName-alert"></span>
		</div>
		<div class="form-group">
			<label>Price</label>
			<div class="input-group">
				<span class="input-group-addon"><span
					class="glyphicon glyphicon-yen"></span> </span> <input type="number"
					class="form-control" id="price" name="fPrice"
					placeholder="Price...">
			</div>
			<span class="red-span" id="fPrice-alert"></span>
		</div>
		<div class="form-group" >
			<div class="input-group" id="fPicPreview">
			<!-- 上传成功显示预览图 -->
			</div>
		</div>
		<div class="form-group" id="fPicQueue">
			<label>Food Image</label>
			<div class="input-group">
				<input type="file" class="" id="fpic" name="fViewPath"> <a
					href="javascript:$('#fpic').uploadifive('upload')">点击上传</a>
			</div>
			<span class="red-span" id="fpic-alert"></span>
		</div>
		<c:choose>
			<c:when test="${state == 2 }">
				<div class="form-group">
					<span class="red-span" id="submit-Btn-alert"></span>
					<button type="submit" class="btn btn-common login-btn">Submit</button>
				</div>
			</c:when>
			<c:otherwise>
				<div class="form-group">
					<button type="button" class="btn btn-common login-btn" disabled>Submit</button>
				</div>
			</c:otherwise>
		</c:choose>
	</form>
</div>


<script>

$(function() {
	$('#fpic').uploadifive({
		'auto'             : false,
		'fileObjName'		:'pic',
		'queueSizeLimit' : 1,
		'formData'         : {
							 "picKind":"fViewPath"
		                     },
		'queueID'          : 'fPicQueue',
		'uploadScript'     : 'uploadi5',
		'onUploadComplete' : function() { 
			$("#fpic-alert").html("上传图片成功");
			$.ajax({
	              url:"getSessionAttr",
	              type:"post",
	              data:{senssionAttr:'fViewPath'},
	              success:function(d){
	            	  $("#fPicPreview").append("<img src='${myPicServer }"+d+"'>");
	              }
	          })
			
		}
		
	});
});





	$(function() {

		$("#fname").focus(function() {
			$("#fName-alert").html("");
		})

		$("#fname").blur(function() {
			if ($("#fname").val() == '')
				$("#fName-alert").html("请输入菜名");
		})

		$("#price").focus(function() {
			$("#fPrice-alert").html("");
		})

		$("#price").blur(function() {
			if ($("#price").val() == '')
				$("#fPrice-alert").html("请输入价格");
		})

		
		$("input").focus(function(){
			$("#submit-Btn-alert").html("");
			
	});

	})
	function checkForm() {
		
			var i = true;
			
			$("input").trigger("blur");
			
			if($("#fpic-alert").html() != "上传图片成功"){
				$("#fpic-alert").html("请上传图片");
				 i = false;
			}
			
			$(".red-span").not($("#fpic-alert")).each(function() {
				if ($(this).html() != "") {
					$("#submit-Btn-alert").html("请完整填写菜品信息");
					i = false;
				}
			})


		return i;

	}
</script>